<template>
  <div class="cooperation-page section-padding">
    <div class="container mx-auto px-4">
      <!-- 合作咨询 -->
      <div class="bg-white rounded-lg shadow p-6 md:p-8 mb-8">
        <h3 class="text-xl font-bold mb-6 text-blue-800">合作咨询</h3>
        <!-- 横向排布三个咨询信息 -->
        <div class="max-w-5xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-6">
          <!-- 合作热线 -->
          <div class="flex items-start">
            <div class="w-12 h-12 bg-neutral rounded-full flex items-center justify-center mr-4 flex-shrink-0">
              <i class="fa fa-phone text-primary text-xl"></i>
            </div>
            <div>
              <h4 class="text-lg font-medium text-gray-800 mb-1">合作热线</h4>
              <p class="text-gray-600">400-123-4567</p>
              <p class="text-gray-500 text-sm mt-1">工作日 9:00-18:00</p>
            </div>
          </div>
          <!-- 电子邮箱 -->
          <div class="flex items-start">
            <div class="w-12 h-12 bg-neutral rounded-full flex items-center justify-center mr-4 flex-shrink-0">
              <i class="fa fa-envelope text-primary text-xl"></i>
            </div>
            <div>
              <h4 class="text-lg font-medium text-gray-800 mb-1">电子邮箱</h4>
              <p class="text-gray-600">cooperation@example.com</p>
              <p class="text-gray-500 text-sm mt-1">我们将在24小时内回复您的邮件</p>
            </div>
          </div>
          <!-- 长安校区信息 -->
          <div class="flex items-start">
            <div class="w-12 h-12 bg-neutral rounded-full flex items-center justify-center mr-4 flex-shrink-0">
              <i class="fa fa-map-marker text-primary text-xl"></i>
            </div>
            <div>
              <h4 class="text-lg font-medium text-gray-800 mb-2">长安校区</h4>
              <p class="text-gray-600 mb-1">邮政编码：710121</p>
              <p class="text-gray-600">地址：西安市长安区西长安街618号</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 合作单位 - 改为居中横向排布 -->
      <div class="bg-white rounded-lg shadow p-6 md:p-8 mb-8">
        <h3 class="text-xl font-bold mb-6 text-blue-800">合作单位</h3>
        <!-- 外层容器确保居中，内部网格横向排布 -->
        <div class="max-w-5xl mx-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8">
          <div class="border border-gray-200 rounded-lg p-5 flex flex-col items-center justify-center text-center hover:border-primary transition-colors"
            @click="clickCooperation('gongan')" style="cursor: pointer;">
            <div class="w-20 h-20 bg-neutral rounded-full flex items-center justify-center mb-3">
              <i class="fa fa-building text-primary text-2xl"></i>
            </div>
            <p class="font-medium">陕西省公安厅</p>
          </div>
          <div class="border border-gray-200 rounded-lg p-5 flex flex-col items-center justify-center text-center hover:border-primary transition-colors"
            @click="clickCooperation('tieta')" style="cursor: pointer;">
            <div class="w-20 h-20 bg-neutral rounded-full flex items-center justify-center mb-3">
              <i class="fa fa-building text-primary text-2xl"></i>
            </div>
            <p class="font-medium">中国铁塔股份有限公司</p>
          </div>
          <div class="border border-gray-200 rounded-lg p-5 flex flex-col items-center justify-center text-center hover:border-primary transition-colors"
            @click="clickCooperation('shanli')" style="cursor: pointer;">
            <div class="w-20 h-20 bg-neutral rounded-full flex items-center justify-center mb-3">
              <i class="fa fa-building text-primary text-2xl"></i>
            </div>
            <p class="font-medium">陕西山利科技发展有限责任公司</p>
          </div>
        </div>
      </div>
      <!-- 新增引导模块 - 蓝色渐变背景+无人机背景图 -->
      <div class="relative rounded-lg shadow p-8 md:p-12 mb-8 text-center overflow-hidden">
        <!-- 背景层：蓝色渐变 + 无人机图片 -->
        <div class="absolute inset-0 z-0">
          <!-- 蓝色渐变（从深蓝到浅蓝） -->
          <div class="absolute inset-0 bg-gradient-to-br from-blue-800 to-blue-500 opacity-90"></div>
          <!-- 无人机背景图 -->
          <img 
            src="../../assets/images/homeBanner.jpg" 
            alt="无人机背景" 
            class="w-full h-full object-cover opacity-20"
          >
        </div>
        <!-- 内容层（叠加在背景上） -->
        <div class="relative z-10">
          <h3 class="text-2xl md:text-3xl font-bold mb-4 text-white">加入我们，共创低空经济未来</h3>
          <p class="text-blue-50 max-w-2xl mx-auto mb-8 text-lg">
              我们欢迎对低空经济、无人机技术和航空航天领域感兴趣的研究人员、学生和企业合作伙伴加入我们的团队。
          </p>
          <!-- 联系我们按钮 - 点击触发弹窗 -->
          <button 
            @click="showContactForm = true"
            class="bg-white text-blue-800 px-8 py-3 rounded-lg hover:bg-blue-50 transition-colors font-medium text-lg shadow-lg"
          >
            联系我们
          </button>
        </div>
      </div>
      <!-- 联系我们表单弹窗 -->
      <teleport to="body">
        <div v-if="showContactForm" class="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
          <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto">
            <!-- 弹窗头部 -->
            <div class="p-6 border-b flex justify-between items-center">
              <h3 class="text-xl font-bold text-blue-800">联系我们</h3>
              <button @click="showContactForm = false" class="text-gray-500 hover:text-gray-700">
                <i class="fa fa-times text-xl"></i>
              </button>
            </div>
            <!-- 弹窗表单内容 -->
            <div class="p-6 md:p-8">
              <form @submit.prevent="handleSubmit" class="space-y-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div>
                    <label for="name" class="block text-gray-700 mb-2">昵称</label>
                    <input 
                      type="text" 
                      id="name" 
                      v-model="formData.name" 
                      class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                      required
                    >
                  </div>
                  <div>
                    <label for="contact" class="block text-gray-700 mb-2">联系方式</label>
                    <input 
                      type="text" 
                      id="contact" 
                      v-model="formData.contact" 
                      class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                      required
                    >
                  </div>
                </div>
                <div>
                  <label for="subject" class="block text-gray-700 mb-2">主题</label>
                  <input 
                    type="text" 
                    id="subject" 
                    v-model="formData.subject" 
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                    required
                  >
                </div>
                <div>
                  <label for="message" class="block text-gray-700 mb-2">留言内容</label>
                  <textarea 
                    id="message" 
                    v-model="formData.message" 
                    rows="5"
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                    required
                  ></textarea>
                </div>
                <div class="flex justify-end gap-4">
                  <button 
                    type="button"
                    @click="showContactForm = false"
                    class="px-6 py-3 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors font-medium"
                  >
                    取消
                  </button>
                  <button 
                    type="submit" 
                    class="bg-primary text-white px-6 py-3 rounded-lg hover:bg-primary/90 transition-colors font-medium"
                  >
                    提交留言
                  </button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </teleport>
    </div>
  </div>
</template>
<script>
export default {
  name: 'GuestCooperation',
  data() {
    return {
      formData: {
        name: '',
        contact: '', 
        subject: '',
        message: ''
      },
      showContactForm: false // 控制联系表单弹窗显示/隐藏
    }
  },
  methods: {
    clickCooperation(temp) {
      switch(temp) {
        case 'tieta':
          window.open("https://www.china-tower.com/")
          break
        case 'gongan': 
          window.open("https://gat.shaanxi.gov.cn/")
          break
        case 'shanli': 
          window.open("http://www.sunnyit.com/web1088/")
          break
      }
    },
    handleSubmit() {
      // 表单提交逻辑
      console.log('表单提交数据:', this.formData)
      alert('感谢您的留言，我们会尽快回复您！')
      // 重置表单并关闭弹窗
      this.formData = {
        name: '',
        contact: '', 
        subject: '',
        message: ''
      }
      this.showContactForm = false
    }
  }
}
</script>
<style scoped>
.section-padding {
  @apply py-12 md:py-16;
}
/* 响应式调整 */
@media (max-width: 768px) {
  .grid-cols-3 {
    grid-template-columns: 1fr;
  }
}
/* 自定义中性色（如果未在全局定义） */
.bg-neutral {
  background-color: #f3f4f6;
}
/* 自定义主色（可根据实际项目调整） */
.text-primary {
  color: #014a95;
}
.bg-primary {
  background-color: #014a95;
}
.hover\:border-primary:hover {
  border-color: #014a95;
}
.focus\:ring-primary:focus {
  --tw-ring-color: #014a95;
}
/* 背景图相关样式 */
.object-cover {
  object-fit: cover;
}
.opacity-20 {
  opacity: 0.2;
}
.opacity-90 {
  opacity: 0.9;
}
.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.from-blue-800 {
  --tw-gradient-from: #1e3a8a;
  --tw-gradient-to: rgba(30, 58, 138, 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-blue-500 {
  --tw-gradient-to: #3b82f6;
}
</style>